The Sankey diagram previously distributed each revenue source proportionally across all expenses simultaneously, with no ordering guarantee and no representation of surplus revenue.

Changes

• Revenue ordering — revenue nodes are now sorted descending by amount so the largest source always appears at the top
• Sequential allocation — each revenue source exhausts expenses top-to-bottom before the next source picks up; a source only touches an expense category if prior sources left it unfilled
• Leftover node — when total revenue exceeds total expenses, the surplus is collected into a grey "Leftover" node at the bottom of the right side
• Accurate flow bands — band heights are now computed proportionally against each node's actual allocated amount rather than a global total, so bands fill their source/destination nodes exactly

Allocation logic

for (const [revCat, revAmount] of revEntries /* sorted desc */) {
    let remaining = revAmount;
    for (const expCat of expenseOrder) {
        if (remaining < ALLOC_EPSILON) break;
        const need = remainingExpenses[expCat] ?? 0;
        if (need < ALLOC_EPSILON) continue;
        const allocated = Math.min(remaining, need);
        flows.push({ revCat, expCat, amount: allocated });
        remainingExpenses[expCat] -= allocated;
        remaining -= allocated;
    }
    if (remaining > ALLOC_EPSILON)
        flows.push({ revCat, expCat: 'Leftover', amount: remaining });
}

Result